<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <button @click="handler_base">修改基本类型数据</button>
            <p>数据展示{{msg}},{{num}},{{boolean1}}</p>
            <hr />
            <button @click="handler_arr">修改数组</button>
            <p>数据展示{{person}}</p>
            <hr />
            <button @click="handler_obj">修改对象</button>
            <p>数据展示{{person1}}</p>
        </div>
        <script>
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "hello",
                        num: 1,
                        boolean1: false,
                        person: ["小王", "大李", "小张", "王中王"],
                        person1: {
                            name: "laowang",
                            age: 18,
                            score: {
                                math: 100,
                                ch: 90,
                            },
                        },
                    };
                },
                methods: {
                    handler_base() {
                        // 1.基本数据类型直接修改，并具有响应式
                        this.msg = "hello1";
                        this.num = 2;
                        this.boolean1 = true;
                    },
                    handler_arr() {
                        // 1.使用变更数组方法修改数组
                        this.person.push("卡莎");
                        // 2.使用非变更数组的方法修改数组，就是重新赋值
                        this.person = this.person.filter((item) => {
                            return item.startsWith("小");
                        });
                    },
                    handler_obj() {
                        // 1.可以直接修改
                        this.person1.name = 'laowang1'
                        // 2.重新赋值（需要浅拷贝或深拷贝出来，再赋值回去）
                        this.person1 = { ...this.person1, age: 20 }
                        // 3.新增或删除属性需要调用vm.$set或者Vue.set方法
                        this.$set(this.person1, '新增', '11')
                        this.$delete(this.person1, "name")
                    },
                },
            });
        </script>
    </body>
</html>
